<template>
  <!-- 单词本 -->
  <div>
    <Header :width="1000" :isGoBack="false">
      <template v-slot:right>
        <div class="btn" @click="goStudyCenter">返回学习中心</div>
      </template>
    </Header>
    <div class="word-book word-book-tab w1000">
      <div class="word-book-container">
        <div class="word-book-tab-header word-book-header pl10">
          {{ checkedBookData.edition_name }}-{{ checkedBookData.grade_name }}
        </div>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="单词浏览" name="first">
            <div class="tab-container">
              <AllWord
                :unitList="unitList"
                :initValue="value"
                :checkedBookData="checkedBookData"
                ref="allWord"
              ></AllWord>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="熟词浏览"
            name="fourth"
            v-if="!($route.query.wordBank || $route.query.experientialWord)"
          >
            <div class="tab-container">
              <FamiliarWord
                :unitList="unitList"
                :initValue="value"
                :checkedBookData="checkedBookData"
                ref="allWord"
              ></FamiliarWord>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="单词卡片" name="second"></el-tab-pane> -->
          <el-tab-pane
            label="发音训练"
            name="third"
            v-if="!($route.query.wordBank || $route.query.experientialWord)"
          >
            <div class="tab-container">
              <DictionTraining
                :unitList="unitList"
                :checkedBookData="checkedBookData"
                :initValue="value"
                ref="dictionTraining"
              ></DictionTraining>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import FamiliarWord from "./familiarWord/index.vue";
import AllWord from "./allWord/Index";
import DictionTraining from "./dictionTraining/Index";
import { getUnitList, getExperienceUnit } from "@/api/index";

export default {
  data() {
    return {
      value: null,
      checkedBookData: null,
      unitList: [],
      activeName: "first",
    };
  },
  components: {
    Header,
    AllWord,
    DictionTraining,
    FamiliarWord,
  },
  methods: {
    goStudyCenter() {
      this.$router.go(-1);
    },
    async getUnitList() {
      console.log(this.$route.query.experientialWord, 84848);
      if (this.$route.query.experientialWord) {
        const res = await getExperienceUnit();
        const data = res.data.unit[0].map((item) => {
          return {
            unit_id: item.id,
            unit_name: item.name,
          };
        });
        this.unitList = data
        return
      }
      let params = {
        bookId: this.checkedBookData.book_id,
      };
      getUnitList(params).then((res) => {
        if (res.code == 200 && res.data) {
          this.unitList = res.data;
          let checkedUnit = JSON.parse(localStorage.getItem("checkedUnit"));
          if (checkedUnit) {
            let data = this.unitList.filter((item) => {
              return item.unit_id == checkedUnit.unit_id;
            });
            if (data.length > 0) {
              this.value = checkedUnit.unit_id;
            }
          }
          //
          // 获取数据
        }
      });
    },
  },
  mounted() {},
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    if (this.$route.query.tab) {
      this.activeName = this.$route.query.tab;
    }
    this.getUnitList();
  },
};
</script>
